<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>creatRef</title>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>
    <!-- <div id="test2"></div>
    <div id="test3"></div> -->

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，将jsx转为js -->
    <script src="../js/babel.min.js"></script>
    <!-- 引入prop-types ，对标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">/*此处写babel*/ 
        class Demo extends React.Component {
            /*
                1.React.creatRef() 调用后返回一个容器，该容器存储被ref标识的节点，该容器是“专人专用”的
                2.react事件处理
                    (1).通过onXxxx属性指定事件处理函数（大小写）
                        a. React中使用的是自定义事件，而不是原生的DOM事件——————为了更好的兼容性
                        b. React中事件是通过事件委托来处理的（委托给最外层的元素）——————为了更加高效
                    (2).通过event.target获得触发事件的DOM元素对象——————不要过度使用ref
            */

           //创建ref    固定写法 React,creatRef()
            myRef = React.createRef();
            // myRef2 = React.createRef();
            //展示左侧输入框数据,用ref
            showData=()=>{
                alert(this.myRef.current.value);
            }
            //右侧数据。用事件处理
            showData2=(event)=>{
                alert(event.target.value);
            }
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text" placehoder="点击按钮提示数据"/>
                        <button onClick={this.showData}>点击提示左侧的数据</button>
                        <input onBlur={this.showData2} type="text" placehoder="失去焦点提示数据"/>
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    </script>
</body>
</html>